<template>
    <el-dialog
            model-value="scale"
            title="Tips"
            fullscreen
            custom-class="img-dialog"
    >
        <!--上一张-->
        <span class="el-image-viewer__btn el-image-viewer__prev">
            <i class="icon iconfont icon-left" @click="swiper"></i>
        </span>
        <!--下一张-->
        <span class="el-image-viewer__btn el-image-viewer__next">
            <i class="icon iconfont icon-right" @click="swiper('n')"></i>
        </span>
        <!--工具栏-->
        <div class="el-image-viewer__btn el-image-viewer__actions">
            <div class="el-image-viewer__actions__inner">
                <i class="icon iconfont icon-suoxiao" @click="small"></i>
                <i class="icon iconfont icon-fangda" @click="large"></i>
                <i class="icon iconfont icon-quanping" @click="reset"></i>
                <i class="icon iconfont icon-zuoxuan" @click="rotate(-1)"></i>
                <i class="icon iconfont icon-youxuan" @click="rotate(1)"></i>
            </div>
        </div>
        <!--列表-->
        <div class="el-image-viewer__canvas" @mousewheel.prevent="scanImg"
             style="overflow: hidden;transition: all 0.5s;">
            <img :src="src"
                 alt="" ref="image" :style="{transform:'scale('+multiples+') rotate('+deg+'deg)'}"/>
        </div>
    </el-dialog>
</template>

<script lang="ts">
    import {defineComponent, reactive, ref, watch} from 'vue'

    export default defineComponent({
        name: "DialogImg",
        props: {
            data: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            srcField: {
                type: String,
                default: 'src'
            },
        },
        setup(props) {
            const multiples = ref(1);
            const deg = ref(0);
            const srclist = reactive<any>([]);
            const index = ref(0);
            const src = ref('');

            watch([() => props.data, () => props.srcField], (val) => {
                let data = val[0];
                let field = props.srcField;
                for (let i in data) {
                    srclist.push(data[i][field])
                }
            })

            //当前图片index
            const swiper = (type) => {
                let arr = [...srclist];
                if(type == 'n'){
                    if (index.value < srclist.length - 1) {
                        index.value++
                        src.value = arr[index.value];
                    } else if (index.value == srclist.length - 1) {
                        index.value = 0
                        src.value = arr[index.value];
                    }
                }else {
                    if (index.value == 0) {
                        index.value = srclist.length - 1
                        src.value = arr[index.value];
                    } else {
                        index.value--
                        src.value = arr[index.value];
                    }
                }

                console.log(src.value)
            }


            //放大
            const large = () => {
                if (multiples.value < 9.8) {
                    multiples.value = multiples.value + 0.2
                }
            }

            //缩小
            const small = () => {
                if (multiples.value > 0.3) {
                    multiples.value = multiples.value - 0.2
                }
            }

            //滑轮缩放
            const scanImg = (e) => {
                if (e.deltaY < 0) {
                    large()
                } else {
                    small()
                }
            }

            //复原
            const reset = () => {
                multiples.value = 1;
                deg.value = 0;
            }

            //旋转
            const rotate = (t) => {
                if (t == -1) {
                    deg.value = deg.value - 90;
                } else {
                    deg.value = deg.value + 90;
                }
            }

            return {
                scanImg,
                multiples,
                large,
                small,
                reset,
                rotate,
                deg,
                swiper,
                src,
            }
        }
    })
</script>

<style lang='scss'>
    .img-dialog {
        overflow: hidden;
        height: 100%;
        background-color: transparent;

        .el-dialog__header {
            display: none;
        }

        .el-dialog__footer {
            display: none;
        }

        .el-dialog__body {
            width: 100%;
            height: 100%;
        }

        .el-dialog__close {
            width: 44px;
            height: 44px;
            font-size: 24px;
            color: #fff;
            background-color: var(--el-text-color-regular);
            border-color: #fff;
            top: 40px;
            right: 40px;
            position: absolute;
            display: flex;
            align-items: center;
            border-radius: 50%;
            opacity: .8;
            cursor: pointer;
            box-sizing: border-box;
            user-select: none;
        }

        .el-image-viewer__btn {
            .iconfont {
                font-size: 24px;
            }
        }
    }
</style>

<style scoped lang='scss'>
    .a {

    }
</style>